<style scoped lang="scss">
    ::v-deep {
        .el-table__empty-block {
            height: auto!important;
        }
    }
</style>
<template>
    <el-popover
            v-model="visible"
            trigger="click"
            ref="popover"
            @show="onopen"
    >
        <template>
            <slot slot="reference" v-if="$slots&&$slots.default" />
            <el-input type="text" slot="reference" v-else-if="$props.showMode=='input'"
                      v-model="nameForShowBack" :placeholder="$attrs['placeholder']"
                      :style="$el&&$el.style&&$el.style.cssText||'width:120px;'"
            >
            </el-input>
            <el-button type="text" slot="reference" v-else>
                <span>{{nameForShowBack||$attrs['placeholder']}}</span>
            </el-button>
        </template>
        
        
        <section>
            <eventhandlersList ref="eventhandlersListDom" v-if="visible" @success="submitSuccess"></eventhandlersList>
        </section>
        
        
        <div style="display: flex;justify-content: end;margin-top: 10px;">
            <el-button @click="_cancelEvent" size="mini">取消</el-button>
            <el-button @click="_successEvent" size="mini" type="primary">确定</el-button>
        </div>
    </el-popover>
</template>

<script>
  import { formData, formMethod, PageData } from '@/utils/formcommon';
  
  
  export default {
    name: 'eventhandlersListSelect',
    data() {
      return {
        ...formData,
        queryParams: {
          haveNext: true,
          name: '',
          ...PageData,
          pageSize: 10,
        },
        innerValue: '',
        nameForShowBack: '',
        
        //分类(类别)信息记录
        classData: {
          id: '',
          name: '',
          classIdPath: '',
        },
        
        tableSelectRows: [],
        loading: false,
        visible: false,
        
        treeClickCount: 0,
        
      };
    },
    props: {
      value: [String, Number, Array, Object],
      text: [String, Number],
      showMode: {
        type: [String],
        default() {
          return 'input';
        },
      },
     
    },
    mounted() {
      this.innerValue = this.$props.value;
    },
    watch: {
      '$props.value'(_val) {
        this.innerValue = _val;
      },
      '$props.text': {
        handler(_val) {
          this.nameForShowBack = _val;
        },
        immediate: true,
      },
      visible(istrue) {
      },
    },
    components: {
      eventhandlersList: () => import('@/views/bnpmList/form/eventhandlers/list.vue'),
    },
    methods: {
      ...formMethod,
      onopen() {
        setTimeout(() => {
          this.$refs['eventhandlersListDom'].initByDialog({
            action: '选择器',
          });
        }, 200);
      },
      
      ajaxNodeList() {
        this.loading = true;
        var params = this.queryParams;
        return this.$props.classApi.getList(params).then((response) => {
          this.dataList = response.data.map(item => {
            return item;
          });
          this.total = response.count;
          this.loading = false;
        });
      },
      
      currentChange(currentRow, oldCurrentRow) {
        console.log('table row click ', currentRow);
        this.$refs.table.toggleRowSelection(currentRow);
      },
      resetFunc() {
        this.queryParams && delete this.queryParams.parentId;
        this.queryParams.name = '';
        this.ajaxNodeList();
      },
      
      
      handleNodeClick(data) {
        //console.log('是否是末级分类', data);
        
        this.selectTreeNode = data;
        this.classIdPath = `${data.parentIdPath},${data.id}`;
        this.classId = data.id;
        this.classData = data;
        this.innerValue = data.id;
        
        
        // region  双击事件
        //记录点击次数
        this.treeClickCount++;
        //单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
        if (this.treeClickCount >= 2) {
          return;
        }
        //计时器,计算300毫秒为单位,可自行修改
        this.timer = window.setTimeout(() => {
          if (this.treeClickCount == 1) {
            //把次数归零
            this.treeClickCount = 0;
            //单击事件处理
            console.log('单击事件,可在此处理对应逻辑');
            
            
          } else if (this.treeClickCount > 1) {
            //把次数归零
            this.treeClickCount = 0;
            //双击事件
            console.log('双击事件,可在此处理对应逻辑');
            this._successEvent();
          }
        }, 300);
        
        // endregion
        
      },
      loadTreeNode(node, resolve) {
        //如果节点是根目录 不处理
        if (node && node.level == 0) {
          return resolve([]);
        }
        let nextParams = {
          pageNum: 1,
          pageSize: 100,
          haveNext: true,
          parentId: node.data.id,
        };
        console.log('nextParams', nextParams);
        this.$props.classApi.getList(nextParams).then((response) => {
          resolve(response.data);
        });
      },
      _cancelEvent() {
        this.$emit('cancel');
        this.visible = false;
      },
      async getClassNamePath() {
        var classIdpathName = '';
        if (this.innerValue) {
          var item = await this.$props.classApi.getItem(this.innerValue).then(res => res.data);
          if (item) {
            var classIdPath = `${item.parentIdPath},${item.id}`;
            var ids = classIdPath && classIdPath.split && classIdPath.split(',').filter(item => (item != '0' || !item));
            var names = [];
            if (ids) {
              for (let i = 0; i < ids.length; i++) {
                var id = ids[i];
                var itemParent = await this.$props.classApi.getItem(id).then(res => res.data);
                itemParent && names.push(itemParent.name);
              }
            }
            
            classIdpathName = names && names.join('->') || '';
          }
        } else {
          classIdpathName = '';
        }
        return classIdpathName;
      },
      
      
      async _successEvent() {
        var self = this;
        var result = await this.$refs['eventhandlersListDom'].submitByDialog();
        if (!(result && result.success)) {
          return result;
        }
        var data = result && result.data;
        
        this.$emit('input', data.id);
        this.$emit('change', data);
        this.$emit('update:text', data.name);
        this.nameForShowBack = data.name;
        console.log('this.nameForShowBack', data, this.nameForShowBack);
        this.visible = false;
      },
      submitSuccess(result){
         if(result&&result.success){
           var data = result && result.data;
           this.$emit('input', data.id);
           this.$emit('change', data);
           this.$emit('update:text', data.name);
           this.nameForShowBack = data.name;
           console.log('this.nameForShowBack', data, this.nameForShowBack);
           this.visible = false;
         }
      }
    },
  };
</script>
<style scoped lang="scss">
    .table ::v-deep {
        thead .el-table-column--selection .cell {
            display: none;
        }
    }
    
    .overflow1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
